<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js"></script>
    <script src="mock.js"></script>
    <title>Helium wallet reward</title>
  </head>
  <body>
    <div style="width: 100%; height: 100%;align-content: center;align-content: center; ">
      <div style="width: 100%; text-align: center;display: flex;justify-content: center;" >
       <h2>Heium Wallet Reward Visual Dashboard</h2>
      </div>

      <div style="width: 100%; text-align: center;display: flex;justify-content: center;" >
        <div id="chart-5" style="width: 600px;height:500px;"></div>
        <div id="chart-6" style="width: 800px;height:500px;"></div>
        <div id="chart-3" style="width: 600px;height:500px;"></div>
      </div>

      <div style="width: 100%; text-align: center;display: flex;justify-content: center;" >
        <div id="chart-4" style="width: 600px;height:400px;"></div>
        <div id="chart-1" style="width: 800px;height:400px;"></div>
        <div id="chart-2" style="width: 600px;height:400px;"></div>
      </div>
    </div>
    
    <script type="text/javascript">
      var chart_1 = echarts.init(document.getElementById('chart-1'));
      var chart_2 = echarts.init(document.getElementById('chart-2'));
      var chart_3 = echarts.init(document.getElementById('chart-3'));
      var chart_4 = echarts.init(document.getElementById('chart-4'));
      var chart_5 = echarts.init(document.getElementById('chart-5'));
      var chart_6 = echarts.init(document.getElementById('chart-6'));

      var data_1 =mock1();

      var data_2 = mock2();

      var data_3= mock3();

      var data_4 =  mock4();

      var data_5 =  mock5();

      var data_6 =  mock6();


      // Display the chart using the configuration items and data just specified.
      chart_1.setOption(data_1);
      chart_2.setOption(data_2);
      chart_3.setOption(data_3);
      chart_4.setOption(data_4);
      chart_6.setOption(data_6);
      chart_5.setOption(data_5);
    </script>
  </body>
</html>
